<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->

<template>
  <div class="user-info">
    <el-row :span="24">
      <el-col :span="8">
        <basic-container>
          <div class="user-info__content">
            <img class="user-info__img"
                 :src="form.avatar"
                 alt="" />
            <p class="user-info__name">{{form.nickName}}</p>
            <router-link class="user-info__setting"
                         :to="{path:'/info/setting'}">个人设置</router-link>
            <p class="user-info__desc">{{form.ms}}</p>
            <div class="user-info__detail-desc">
              <p><i class="el-icon-message"></i><span>{{form.email}}</span></p>
              <p><i class="el-icon-postcard"></i><span>{{form.phone}} </span></p>
              <p><i class="el-icon-location-information"></i><span>{{form.roleName}}</span></p>
            </div>
            <div class="user-info__divider"></div>
            <h4>标签</h4>
            <div class="user-info__tags">
              <el-tag effect="plain"
                      v-for="(tag,index) in tags"
                      :key="index">
                {{tag}}
              </el-tag>
            </div>
          </div>
        </basic-container>
      </el-col>
      <el-col :span="16">
        <basic-container>
          <el-tabs v-model="activeName">
            <el-tab-pane label="个人信息"
                         name="tab0">
              <el-form label-width="110px">
                <el-form-item label="头像">
                  <el-upload class="avatar-uploader"
                             :show-file-list="false">
                    <img v-if="form.avatar"
                         :src="form.avatar"
                         class="avatar">
                    <i v-else
                       class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item label="姓名">
                  <el-input v-model="form.nickName"></el-input>
                </el-form-item>
<!--                <el-form-item label="用户名">-->
<!--                  <el-input v-model="form.username"></el-input>-->
<!--                </el-form-item>-->
                <el-form-item label="邮箱">
                  <el-input v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary">确认</el-button>
                  <el-button>取消</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="修改密码"
                         name="tab1">
              <el-form label-width="110px">
                <el-form-item label="原密码"
                              prop="oldpassword">
                  <el-input type="password"
                            v-model="form.password"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码"
                              prop="newpassword">
                  <el-input type="password"
                            v-model="form.newpassword"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码"
                              prop="newpasswords">
                  <el-input type="password"
                            v-model="form.newpasswords"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" >确认</el-button>
                  <el-button>重置</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </basic-container>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { openWindow} from "@/framework-core/utils/util";
import {isValidateNoneMobile} from "@/framework-core/utils/validate";

export default {
  data() {
    const validatePhone = (rule, value, callback) => {
      if (isValidateNoneMobile(value)[0]) {
        callback(new Error(isValidateNoneMobile(value)[1]));
      } else {
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      if (this.form.password !== "") {
        if (value !== this.form.newpassword1) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    return {
      activeName:"tab0",
      avatarUrl: "",
      // headers: {
      //   Authorization: store.getters.access_token,
      // },
      form: {
        username: "",
        password: "",
        newpassword1: "",
        newpassword2: "",
        avatar: "",
        phone: "",
        nickname:"",
        name:"",
        email:""
      },
      rules: {
        phone: [{required: false, validator: validatePhone, trigger: "blur"}],
        password: [
          {
            required: true,
            min: 6,
            message: "原密码不少于6位",
            trigger: "blur",
          },
        ],
        newpassword1: [
          {
            required: false,
            min: 6,
            message: "新密码不少于6位",
            trigger: "blur",
          },
        ],
        newpassword2: [
          {required: false, validator: validatePass, trigger: "blur"},
        ],
      },
    };
  },
  created() {
    this.resetForm();
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  methods: {
    submitForm() {
      this.$refs.form1.validate((valid) => {
        if (!valid) {
          return false;
        }
        this.$message.success("editInfo");
        // editInfo(this.form).then((response) => {
        //   this.$notify.success("修改成功");
        //   // 修改后注销当前token,重新登录
        //   this.$store.dispatch("LogOut").then(() => {
        //     location.reload();
        //   });
        // });
      });
    },
    resetForm() {
      this.form.password = undefined;
      this.form.newpassword1 = undefined;
      this.form.newpassword2 = undefined;
      this.form.username = this.userInfo.username;
      this.form.phone = this.userInfo.phone;

      this.form.avatar = this.userInfo.avatar||'https://avatar.gitee.com/uploads/61/632261_smallweigit.jpg!avatar100?1518660401';
      this.form.nickName = this.userInfo.displayName;
      this.form.name = this.userInfo.name
      this.form.email = this.userInfo.exp.email;
      if(this.userInfo.roles){
        this.form.roleName =this.userInfo.roles[0].roleName;
      }
     // handleImg(this.userInfo.avatar, "avatar");
     //  //判断是否选择了租户ID
     //  const TENANT_ID = getStore({name: "tenantId"});
     //  if (TENANT_ID) {
     //    this.headers["TENANT-ID"] = TENANT_ID; // 租户ID
     //  }
    },
    handleAvatarSuccess(res, file) {
      this.avatarUrl = URL.createObjectURL(file.raw);
      this.form.avatar = res.data.url;
    },
    handleClick(thirdpart) {
      let appid, client_id, redirect_uri, url;
      redirect_uri = encodeURIComponent(
        window.location.origin + "/#/authredirect"
      );
      // if (thirdpart === "wechat") {
      //   appid = "wxd1678d3f83b1d83a";
      //   url = `https://open.weixin.qq.com/connect/qrconnect?appid=${appid}&redirect_uri=${redirect_uri}&state=WX-BIND&response_type=code&scope=snsapi_login#wechat_redirect`;
      // } else if (thirdpart === "tencent") {
      //   client_id = "101322838";
      //   url = `https://graph.qq.com/oauth2.0/authorize?response_type=code&state=QQ-BIND&client_id=${client_id}&redirect_uri=${redirect_uri}`;
      // } else if (thirdpart === "gitee") {
      //   client_id =
      //     "235ce26bbc59565b82c989aa3a407ce844cf59a7c5e0f9caa9bb3bf32cee5952";
      //   url = `https://gitee.com/oauth/authorize?response_type=code&state=GITEE-BIND&client_id=${client_id}&redirect_uri=${redirect_uri}`;
      // } else if (thirdpart === "osc") {
      //   client_id = "neIIqlwGsjsfsA6uxNqD";
      //   url = `https://www.oschina.net/action/oauth2/authorize?response_type=code&client_id=${client_id}&state=OSC-BIND&redirect_uri=${redirect_uri}`;
      // }
      openWindow(url, thirdpart, 540, 540);
    },
  },
};
</script>

<style lang="scss">
  .user-info {
    .avue-tabs {
      padding: 0 10px;
    }
    .el-tabs__content {
      padding: 20px 0;
    }
    &__img {
      display: block;
      margin: 0 auto;
      border-radius: 100%;
      width: 100px;
      height: 100px;
    }
    &__name {
      text-align: center;
      font-size: 20px;
      line-height: 28px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 0;
      margin-top: 10px;
    }
    &__setting {
      margin-bottom: 12px;
      display: block;
      font-size: 12px;
      color: #409eff;
      text-align: center;
    }
    &__desc {
      text-align: center;
      width: 200px;
      margin: 0 auto;
    }
    &__detail-desc {
      margin-top: 50px;
      font-size: 14px;
      p {
        margin-bottom: 10px;
      }
      span {
        margin-left: 10px;
      }
    }
    &__divider {
      border-top: 1px dashed #e8e8e8;
      display: block;
      height: 0;
      width: 100%;
      margin: 24px 0;
      clear: both;
    }
    &__tags {
      .el-tag {
        margin: 0 5px 5px 0;
      }
    }
  }
</style>
